<template>
	<view class="product-box-module">
			<view class="product-image">
				<image class="image" v-if="productInfo.goodsLogo==undefined&&productInfo.image==undefined" :src="productInfo.logo" mode=""></image>
				<image class="image" v-if="productInfo.goodsLogo==undefined&&productInfo.logo==undefined" :src="productInfo.image" mode=""></image>
				<image class="image" v-if="productInfo.image==undefined&&productInfo.logo==undefined" :src="productInfo.goodsLogo" mode=""></image>
			</view>
			<view class="product-info-module">
				<view class="nth-child1">
					{{productInfo.goodsName==undefined?productInfo.name:productInfo.goodsName}}
				</view>
				<slot name="sku"></slot>
				<view class="price">
					<slot name="price">￥{{productInfo.goodsPrice}}</slot>
				</view>
				
			</view>
			<view class="product-btn">
				<slot name='number-btn'></slot>
				
				
			</view>
	</view>
</template>

<script>
	export default {
		name:"productInfo",
		props:{
			productInfo:{
				type:Object
				
			}
		},
		onShow(){
			console.log(this.productInfo)
		},
		data() {
			return {
				
			};
		},
		methods:{
			aa(){
				console.log(this.productInfo.goodsLogo)
			}
		}
	}
</script>

<style lang="less" scoped>
	.product-box-module {
		// margin-top: 20rpx;
		// width: 600rpx;
		display: flex;
		
		.product-image {
			flex: 1;
			.image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}
		}
		.product-info-module{
			flex: 3;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 20rpx;
			.nth-child1{
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
			.price{
				font-weight: bold;
				color: #FF8308;
				font-size: 36rpx;
			}
		}
		.product-btn{
			
			flex: 2;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			font-size: 24rpx;
		
		}
	
	}

</style>
